<template>
  <div>
    <h1>App</h1>
    <button @click="appStore.count++">{{ appStore.count }}</button>
    <button @click="appStore.msg += '~'">{{ appStore.msg }}</button>

    <button @click="fn1">通过 $patch object 方式来修改 count</button>
    <button @click="fn2">通过 $patch function 方式来修改 count</button>
    <button @click="fn3">通过 调用 action 方式来修改 count</button>
    <button @click="appStore.decrement()">调用 decrement 动作</button>

    <hr />
    <button @click="appStore.addCart()">调用 addCart 动作</button>
    <ul>
      <li v-for="(item, index) in appStore.cart" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { useAppStore } from './stores/app'

const appStore = useAppStore()
console.log('appStore', appStore)

// $subscribe() 订阅store的state数据的改变
/**
 * mutation - 是一个突变对象，里面是一些描述信息
 *    - storeId   - 当前突变的是那个 store
 *    - type      - 当前突变的类型
 *      - direct            直接修改的数据
 *      - patchObject       通过$patch方法传递对象的形式来修改的数据
 *      - patchFunction     通过$patch方法传递函数的形式来修改的数据
 *    - events
 *      - key               表示修改的state的名字是谁
 *      - oldValue
 *      - newValue
 * state    - 突变之后的 state 数据
 */
appStore.$subscribe((mutation, state) => {
  // console.log('appStore 中 state 数据变化了')
  // console.log('mutation.type', mutation.type)
  // console.log('state', state)
})

/**
 * appStore.$onAction()
 *
 * context
 *    - store     当前动作所在仓库的实例对象
 *    - name      动作的名字
 *    - onError   注册一个监控动作异常的回调函数
 *    - after     注册动作完成之后的回调函数
 *    - arg       动作的参数
 */
appStore.$onAction((context) => {
  console.log('appStore 中动作被调用', context)

  // 通过 after 去注册一个动作完成之后的回调
  context.after(() => {
    console.log('动作完成了')
  })

  // 通过 onError 去注册一个动作异常之后的回调
  context.onError(() => {
    console.log('动作出错了')
  })
})

const fn1 = () => {
  appStore.$patch({
    count: 20,
  })
}

const fn2 = () => {
  appStore.$patch((state) => state.count++)
}

const fn3 = () => {
  appStore.increment('1', '2')
}
</script>
